<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>我的</title>
	</head>

	<body class="mine">
		<!-- 主体 -->
		<main class="main">
			<!-- 用户名 -->
			<section class="box-a">
				<div class="head container">
					<!-- 头像 -->
					<p class="head-one"></p>
					<p class="head-two">用户名: <span>村口蹦野迪</span></p>
				</div>
				<i class="iconfont icon-vip"></i>
				<p class="sign container">
					个性签名:只有在死亡的边缘,才能领悟生命的真谛!
				</p>
			</section>

			<!-- 运动数据 -->
			<section class="box-b">
				<div class="motion container">
					<i class="iconfont icon-tubiao"></i>
					<p>运动数据</p>
					<span>></span>
				</div>

				<div class="motion-a container">
					<!-- 左边 -->
					<div class="min">
						<p class="min-a">总运动</p>
						<p class="min-b"><span class="min-c">99999</span>分钟</p>
					</div>
					<!-- 右边 -->
					<div class="use">
						<p class="use-a">本周消耗</p>
						<p class="use-b"><span class="use-c">99999</span>千卡</p>
					</div>
				</div>
			</section>

			<!-- 运动徽章 -->
			<section class="box-c">
				<div class="badge container">
					<i class="iconfont icon-VIP"></i>
					<p>我的运动徽章</p>
					<span>></span>
				</div>
				<!-- 圆圈 -->
				<div class="badge-a">
					<p class="badge-one"></p>
					<p class="badge-two"></p>
					<p class="badge-three"></p>
				</div>
			</section>

			<!-- 按钮 -->
			<button class="btn">退出登录</button>
		</main>
		<!-- 占位 -->
		<div class="box"></div>
		<!-- 底部导航栏 -->
		<nav class="tabbar">
			<a href="#"><i class="iconfont icon-shouye"></i>首页</a>
			<a href="#"><i class="iconfont icon-yundong"></i>运动</a>
			<a href="#"><i class="iconfont icon-quanzi"></i>圈子</a>
			<a href="#" class="on"><i class="iconfont icon-wode"></i>我的</a>
		</nav>
	</body>
</html>
